<template>
  <!--Dialog-->
  <Dialog v-model="modelValue">
    <el-form :status-icon="true" label-width="auto">
      <el-form-item label="Id">
        {{ detailForm.id }}
      </el-form-item>
      <el-form-item label="Code">
        {{ detailForm.code }}
      </el-form-item>
      <el-form-item label="名称">
        {{ detailForm.displayName }}
      </el-form-item>
      <el-form-item label="创建时间">
        {{ creationTime }}
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="onClose">关闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import { getAsync } from '@/utils/api/organization/index';
import { Dialog } from '@/components/dialog/index';
import { propTypes } from '@/utils/propTypes';
import { onMounted, ref, computed } from 'vue';
import type { OrganizationDto } from '@/utils/api/organization/type';

const props = defineProps({
  id: propTypes.string
});

const creationTime = computed(() => {
  return dayjs(detailForm.value.creationTime).format('YYYY-MM-DD HH:mm:ss');
});

// 控制组件隐藏与显示
const modelValue = defineModel<boolean>(propTypes.bool.def(false));
const close = () => {
  modelValue.value = false;
};

// 关闭
const onClose = () => {
  //触发自定义事件
  close();
};

//组件挂载完毕
onMounted(async () => {
  // 加载权限
  await initOrganizationAsync();
});

// 加载角色信息
const initOrganizationAsync = async () => {
  const organization = await getAsync(props.id);
  detailForm.value = organization;
};

// 添加角色对象
const detailForm = ref<OrganizationDto>({
  displayName: '',
  code: '',
  id: '',
  isDeleted: false
});
</script>
<style scoped lang="scss"></style>
